<template>
  <div class="homepage">
    <div class="left">
      <div class="label_box">
        <div class="label lb1">
          <div>
            <div class="label_num">{{ todayLoginCount }}</div>
            <div>今日登录量</div>
          </div>
          <div>
            <img
              src="../assets/images/count_icon.png"
              class="head_icon"
              alt=""
            />
          </div>
        </div>
        <div class="label lb2">
          <div>
            <div class="label_num">{{ yesterdayLoginCount }}</div>
            <div>昨天登录量</div>
          </div>
          <div>
            <img
              src="../assets/images/count_icon.png"
              class="head_icon"
              alt=""
            />
          </div>
        </div>
        <div class="label lb3">
          <div>
            <div class="label_num">{{ dayBeforeYesterdayLoginCount }}</div>
            <div>前天登录量</div>
          </div>
          <div>
            <img
              src="../assets/images/count_icon.png"
              class="head_icon"
              alt=""
            />
          </div>
        </div>
        <div class="label lb4">
          <div>
            <div class="label_num">{{ maxLoginCount }}</div>
            <div>最高登录量</div>
            <div>
              {{createDate}}
            </div>
          </div>
          <div>
            <img
              src="../assets/images/count_icon.png"
              class="head_icon"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="ddtj_box" v-if="queryModuleUseList.length > 0">
        <foldlineecharts :dataList="queryModuleUseList"></foldlineecharts>
      </div>
      <div class="ydqs_box" v-if="queryBankUseList.length > 0">
        <barecharts :dataList="queryBankUseList"></barecharts>
      </div>
    </div>
    <div class="right">
      <div class="spxl_box" v-if="BankInterfaceUse.length > 0">
        <panecharts :dataList="BankInterfaceUse"></panecharts>
      </div>
      <div class="ddzt_box">
        <div class="ddzt_box_title">银行接口高频被查询企业排名</div>
        <div class="ddzt_nav">
          <div
            v-for="(item, index) in queryFrequentlyCorpList"
            :key="index"
            class="ddzt_title"
          >
            <div class="ddzt_title_left">
              <!-- <img src="../assets/images/hongdian.png" alt="" /> -->
              <div class="red_dian">

              </div>
              {{ item.attribute }}
            </div>
            <div style="margin-left: 10px">
              {{ item.num }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <questionnaireDetail ref="questionnaireDetail"></questionnaireDetail>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      BankInterfaceUse: [],
      queryFrequentlyCorpList: [],
      queryModuleUseList: [],
      queryBankUseList: [],
      todayLoginCount: "",
      yesterdayLoginCount: "",
      dayBeforeYesterdayLoginCount: "",
      maxLoginCount: "",
      createDate:'',
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {},
  destroy() {} /* 5. Vue方法 */,
  methods: {
    getQueryBankUse() {
      queryBankUse().then((res) => {
        this.queryBankUseList = res.data;
      });
    },

    getStatistics() {
      Statistics().then((res) => {
        this.BankInterfaceUse = res.data;
      });
    },
    // 登入量统计
    getQueryLoginCount() {
      queryLoginCount().then((res) => {
        console.log(res,'头部参数')
        this.todayLoginCount = res.data.todayLoginCount;
        this.yesterdayLoginCount = res.data.yesterdayLoginCount;
        this.dayBeforeYesterdayLoginCount =
          res.data.dayBeforeYesterdayLoginCount;
        this.maxLoginCount = res.data.maxLoginCount;
        this.createDate=res.data.createDate;
      });
    },
    // 高频被查询企业排名
    getQueryFrequentlyCorp() {
      queryFrequentlyCorp().then((res) => {
        this.queryFrequentlyCorpList = res.data;
      });
    },
    // 征像各模块使用量
    getQueryModuleUse() {
      queryModuleUse().then((res) => {
        this.queryModuleUseList = res.data;
      });
    },
  }, // all the methods should be put here in the last
};
</script>
<style scoped lang="scss"></style>
